<template>
  <div class="business-part tabs-part">
    <div class="part-one flex-between">
      <div class="card">
        <p class="card-name">商业内容互动率</p>
        <div class="part-main flex flex-align-items-center">
          <p class="flex-center flex-align-items-center">
            <i class="iconfont icon-cooperation-full2"></i>
          </p>
          <div class="font-20-B">{{ detail.businessInteractRate }}</div>
        </div>
        <p class="card-desc">近6个月发布的广告内容互动率 {{ detail.businessInteractRate }}</p>
      </div>
      <div class="card">
        <p class="card-name">商业内容发布频次</p>
        <div class="part-main flex flex-align-items-center">
          <p class="flex-center flex-align-items-center">
            <i class="iconfont icon-briefcase-full"></i>
          </p>
          <div class="flex flex-align-items-center font-20-B">
            {{ detail.businessNum }}
            <span class="font-14-B">/{{ detail.businessPublishFrequ }}</span>
          </div>
        </div>
        <p class="card-desc">近6个月该红人平均每月发布23条广告内容，占总内容的{{ detail.businessPublishFrequ }}</p>
      </div>
    </div>

    <div class="brand-part card">
      <p class="card-name">品牌提及</p>
      <el-table :data="brandMention" max-height="420" class="part-main">
        <el-table-column prop="time" label="发布日期" width="129" />
        <el-table-column label="品牌" width="224">
          <template #default="scope">
            <div class="row-name flex flex-align-items-center">
              <img :src="scope.row.brandImg">
              <p class="font-16-B ellipsis-1">{{ scope.row.brandName }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column label="视频" width="330">
          <template #default="scope">
            <div class="row-video flex flex-align-items-center">
              <div class="flex pointer">
                <img :src="scope.row.img">
                <p class="flex-center flex-align-items-center">
                  <i class="iconfont icon-bofang"></i>
                </p>
              </div>
              <p class="font-14 ellipsis-2">{{ scope.row.name }}</p>
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="avgInteractRate" label="互动率" width="128" />
        <el-table-column label="播放量" width="128">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.avgPlayNum, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="点赞量" width="128">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.praiseNum, 2) }}</p>
          </template>
        </el-table-column>
        <el-table-column label="评论数" width="128">
          <template #default="scope">
            <p class="font-14">{{ numConvert(scope.row.commentNum, 2) }}</p>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination flex">
        <el-pagination background :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
          :total="brandPartTotal" />
      </div>
    </div>
    <div class="goods-part card">
      <p class="card-name">带货商品</p>
      <el-table :data="products" max-height="420" class="part-main">
        <el-table-column label="商品图" width="173">
          <template #default="scope">
            <div class="row-img flex flex-align-items-center">
              <img :src="scope.row.img" class="pointer">
            </div>
          </template>
        </el-table-column>
        <el-table-column prop="type" label="商品类别" width="170" />
        <el-table-column prop="avgInteractRate" label="商品名称" width="554">
          <template #default="scope">
            <p class="row-name font-14 ellipsis-2">{{ scope.row.name }}</p>
          </template>
        </el-table-column>
        <el-table-column label="视频信息" width="298">
          <template #default="scope">
            <div class="row-video flex pointer">
              <img :src="scope.row.videoCover">
              <p class="flex-center flex-align-items-center">
                <i class="iconfont icon-bofang"></i>
              </p>
            </div>
          </template>
        </el-table-column>
      </el-table>
      <div class="pagination flex">
        <el-pagination background :page-sizes="[10, 20, 50, 100]" layout="prev, pager, next, total"
          :total="brandPartTotal" />
      </div>
    </div>
  </div>
</template>

<script setup>
import { defineProps, ref } from 'vue';
import numConvert from '@/js/numConvert.js';

const props = defineProps(['detail']);

const brandPartTotal = ref(78);
const brandMention = ref([
  {
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc',
    name: 'I Tried ₹20000 Cheapest 5G iPhone - SCAM Ho Gaya 😭 | Refurbished iPhone 12 Mini in 2024',
    avgPlayNum: 91503,
    praiseNum: 26785,
    commentNum: 278,
    time: '2023-12-24',
    avgInteractRate: '5.12%',
    brandImg: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    brandName: 'Oneplus'
  },
  {
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc',
    name: 'I Tried ₹20000 Cheapest 5G iPhone - SCAM Ho Gaya 😭 | Refurbished iPhone 12 Mini in 2024',
    avgPlayNum: 91503,
    praiseNum: 26785,
    commentNum: 278,
    time: '2023-12-24',
    avgInteractRate: '5.12%',
    brandImg: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    brandName: 'Oneplus'
  },
]);
const products = ref([
  {
    img: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    url: 'https://www.youtube.com/watch?v=xGBTUoLBgMc',
    name: 'I Tried ₹20000 Cheapest 5G iPhone - SCAM Ho Gaya 😭 | Refurbished iPhone 12 Mini in 2024',
    videoCover: 'https://img-cdn.wotokol.com/images/1/video/4736EED9B04FC2D6079FEC861A9932C5FC9BBDECF2467655034AAF38AB138E889553A0CBFD2BA62A36864E5DDC828BEDA33E1A8AFC9FED0255CEA027332A1ED5.jpg',
    type: 'Electronics'
  }
]);
</script>

<style lang="less" scoped>
.card {
  padding: 24px;
  border-radius: 20px;
  background: #fff;
  margin-bottom: 24px;

  .card-name {
    display: flex;
    align-items: center;
    font-size: 16;
    color: #333;

    &::before {
      content: "";
      width: 9px;
      height: 9px;
      border-radius: 50%;
      background: @main-color;
      margin-right: 8px;
    }
  }

  .card-desc {
    border-top: 2px solid #ededed;
    color: #999;
    padding-top: 14px;
    font-size: 14px;
  }
}

.pagination {
  padding-top: 20px;
  justify-content: end;
}

.part-one {
  .card {
    width: 622px;
  }

  .part-main {
    margin: 40px 0 24px;
    height: 50px;

    p {
      width: 50px;
      height: 50px;
      background: rgba(248, 82, 119, .1);
      border-radius: 10px;
      margin-right: 24px;

      i {
        color: @main-color;
        font-size: 30px;
      }
    }

    div {
      color: #333;

      span {
        color: #999;
        margin-left: 4px;
      }
    }
  }
}

.brand-part,
.goods-part {
  .part-main {
    margin-top: 32px;
  }
}

.brand-part {
  .part-main {
    .row-name {
      img {
        width: 50px;
        height: 50px;
        margin-right: 14px;
        border-radius: 8px;
      }

      p {
        color: #323233;
      }
    }

    .row-video {
      div {
        position: relative;
        width: 65px;
        height: 50px;
        margin-right: 16px;

        img {
          width: 83px;
          height: 50px;
          border-radius: 8px;
          object-fit: cover;
        }

        p {
          width: 30px;
          height: 30px;
          position: absolute;
          left: 20px;
          top: 10px;
          border-radius: 15px;
          background: rgba(0, 0, 0, 0.4);

          i {
            color: #fff;
          }
        }
      }

      &>p {
        color: #323233;
      }
    }
  }
}

.goods-part {
  .part-main {
    .row-img {
      img {
        width: 50px;
        height: 50px;
        border-radius: 8px;
      }
    }

    .row-video {
      position: relative;
      width: 65px;
      height: 50px;
      margin-right: 16px;

      img {
        width: 83px;
        height: 50px;
        border-radius: 8px;
        object-fit: cover;
      }

      p {
        width: 30px;
        height: 30px;
        position: absolute;
        left: 20px;
        top: 10px;
        border-radius: 15px;
        background: rgba(0, 0, 0, 0.4);

        i {
          color: #fff;
        }
      }
    }
  }
}
</style>
